/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<      >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<            >>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<      flex      >>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<            >>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<      >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

/* ============================== 越前优先级越低 ============================== */
body.CoreBody {
  /* ============================== 弹性布局 ============================== */
  .flex {
    display: flex;
    position: relative;
    box-sizing: border-box;
  }

  /* ============================== 双居中弹性布局 ============================== */
  .flexCC {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
  }

  /* ============================== 内联的弹性布局 ============================== */
  .inFlex {
    display: inline-flex;
    position: relative;
    box-sizing: border-box;
  }

  /* ============================== 内联的双居中弹性布局 ============================== */
  .inFlexCC {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
  }

  /* ============================== 垂直弹性 ============================== */
  .flexCol {
    flex-direction: column;
  }

  /* ============================== 可换行 ============================== */
  .flexWrap {
    flex-wrap: wrap;
  }

  /* ============================== 左对齐 ============================== */
  .flexLeft {
    justify-content: flex-start;
  }

  /* ============================== 中对齐 ============================== */
  .flexCenter {
    justify-content: center;
  }

  /* ============================== 右对齐 ============================== */
  .flexRight {
    justify-content: flex-end;
  }

  /* ============================== 上对齐 ============================== */
  .flexTop {
    align-items: flex-start;
  }

  /* ============================== 中对齐 ============================== */
  .flexMiddle {
    align-items: center;
  }

  /* ============================== 下对齐 ============================== */
  .flexBottom {
    align-items: flex-end;
  }

  /* ============================== flex1 到 flex60 ============================== */
  @for $i from 1 to 61 {
    .flex#{$i} {
      position: relative;
      flex: $i;
      box-sizing: border-box;
    }
  }

  /* ============================== flex0 ============================== */
  .flex0 {
    position: relative;
    flex: none;
    box-sizing: border-box;
  }
}
